<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影师列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto bg-white min-h-screen pb-16">
        <!-- 顶部导航 -->
        <div class="bg-white p-4 flex items-center border-b sticky top-0 z-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            <h1 class="text-lg font-bold flex-1 text-center">摄影师列表</h1>
        </div>
        
        <!-- 搜索栏 -->
        <div class="p-4 bg-white sticky top-14 z-10">
            <div class="flex items-center bg-gray-100 rounded-full px-4 py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <input type="text" placeholder="搜索摄影师" class="bg-transparent border-none focus:outline-none ml-2 flex-1">
            </div>
        </div>
        
        <!-- 筛选条件 -->
        <div class="flex p-2 bg-white border-b overflow-x-auto whitespace-nowrap">
            <div class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm mr-2">全部</div>
            <div class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm mr-2">空闲中</div>
            <div class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm mr-2">评分最高</div>
            <div class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm mr-2">价格最低</div>
            <div class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">风格筛选</div>
        </div>
        
        <!-- 摄影师列表 -->
        <div class="p-4 space-y-4">
            <!-- 摄影师卡片 1 -->
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex">
                    <div class="w-20 h-20 rounded-full overflow-hidden mr-4">
                        <img src="https://source.unsplash.com/random/100x100/?portrait,1" alt="摄影师头像" class="w-full h-full object-cover">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center">
                            <h3 class="font-bold text-lg">小明摄影</h3>
                            <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">空闲</span>
                        </div>
                        <div class="flex items-center mt-1">
                            <div class="flex text-yellow-400">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                            </div>
                            <span class="text-sm ml-1">4.9 (128条评价)</span>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">专注Cosplay人像 | 3年经验</div>
                        <div class="text-sm text-gray-500">价格：¥300/组起</div>
                    </div>
                </div>
                
                <div class="mt-3 grid grid-cols-3 gap-2">
                    <img src="https://source.unsplash.com/random/300x300/?cosplay,1" alt="作品" class="w-full h-24 object-cover rounded">
                    <img src="https://source.unsplash.com/random/300x300/?cosplay,2" alt="作品" class="w-full h-24 object-cover rounded">
                    <img src="https://source.unsplash.com/random/300x300/?cosplay,3" alt="作品" class="w-full h-24 object-cover rounded">
                </div>
                
                <div class="mt-3 flex justify-between">
                    <div class="text-sm">
                        <span class="text-gray-500">当前排队：</span>
                        <span class="text-indigo-600 font-bold">0人</span>
                    </div>